<template>
  <view class="content">
    <view class="mianBody">
      <p class="time">{{ detail.createTime }}</p>
      <itemFile v-for="(item,index) in listCard" :key="index" :item='item' color='#fff' style="margin: 0 ;">
      </itemFile>
    </view>
    <fromCard ref="child" :fromData='fromData' :rules='rules' :userInfo='userInfo' style="padding: 20rpx 0;width: 750rpx;"
              @fieldChange="fieldChange"
              @showSelect='showSelect'>
      <!-- <view class="dzqz">
      <h3>电子签章</h3>
      <image :src="imageUrl" mode="" class="sziedzqz"></image>
    </view> -->
      <!-- <u-button color='#3db020' type="primary" text="保存"  @click="submit"></u-button> -->
      <view class="baocun flexmid" @click="submit">保存</view>
    </fromCard>
    <u-picker :columns="userList" :show="show" confirmColor='#3DB020' @cancel='show = false'
              @confirm='confirm'></u-picker>
  </view>
</template>

<script>
import {detailValue, medicalWasteEdit} from '../../utils/api.js'

export default {
  data() {
    return {
      detail: {},
      edictID: '',
      imageUrl: '',
      userInfo: {
        sharpsGrossWeight: '',
        infectionGrossWeight: '',
        infectionNetWeight: '',
        sharpsNetWeight: '',
        infectionBarrelsCount: '',
        sharpsBarrelsCount: '',
        totalWasteNetWeight: '',
        transferPerson: '',
      },
      rules: {
        'totalWasteNetWeight': {
          type: 'number',
          required: true,
          message: '请填写合计净重',
          trigger: ['blur', 'change']
        },
        'transferPerson': {
          type: 'string',
          required: true,
          message: '请填写交接人姓名',
          trigger: ['blur', 'change']
        },
      },
      fromData: [{
        title: '感染性医疗废物（kg)(841-001-01)',
        fromItem: [{
          label: '桶数',
          key: 'infectionBarrelsCount',
          dw: '桶',
          type: 'input',
          labelWidth: 120,
          typeValue: 'number',
        }, {
          label: '毛重',
          key: 'infectionGrossWeight',
          dw: 'kg',
          type: 'input',
          labelWidth: 120,
          typeValue: 'digit',
        }, {
          label: '净重',
          key: 'infectionNetWeight',
          dw: 'kg',
          type: 'input',
          labelWidth: 120,
          typeValue: 'digit',
        },],
      },
        {
          title: '损伤性医疗废物（kg)(841-002-01)',
          fromItem: [{
            label: '桶数',
            key: 'sharpsBarrelsCount',
            dw: '桶',
            type: 'input',
            labelWidth: 120,
            typeValue: 'number',
          }, {
            label: '毛重',
            key: 'sharpsGrossWeight',
            dw: 'kg',
            type: 'input',
            labelWidth: 120,
            typeValue: 'digit',
          }, {
            label: '净重',
            key: 'sharpsNetWeight',
            dw: 'kg',
            type: 'input',
            labelWidth: 120,
            typeValue: 'digit',
          },],
        },
        {
          title: '合计',
          fromItem: [{
            label: '合计（净重）',
            key: 'totalWasteNetWeight',
            dw: 'kg',
            type: 'input',
            labelWidth: 120,
            require: true,
            typeValue: 'digit',
          },
            {
              label: '毛重',
              dw: 'kg',
              type: 'mark',
              labelWidth: 120,
            }, {
              label: '交接人签字',
              key: 'transferPerson',
              type: 'select',
              dw: '',
              labelWidth: 100,
              require: true,
            },
          ],
        },
      ],
      infectinjure: [{
        label: '桶数',
        key: 'injurets',
        dw: '桶'
      },
        {
          label: '毛重',
          key: 'injuremz',
          dw: 'kg'
        },
        {
          label: '净重',
          key: 'injurejz',
          dw: 'kg'
        }
      ],

      infecttotal: [{
        label: '净重',
        key: 'jz',
        dw: 'jz'
      }, {
        label: '交接人',
        key: 'jz',
        dw: 'jz'
      },],

      listCard: [{
        title: '',
        child: [{
          width: '100%',
          title: '收运记录单号',
          mark: ''
        },
          {
            width: '100%',
            title: '客户简称',
            mark: ''
          },
          {
            width: '50%%',
            title: '客户地址',
            mark: ''
          },
        ]
      }],
      show: false,
      userList: []
    }
  },
  mounted() {
    // 在这里构造图片的URL，假设你的图片都是以图片ID结尾的
    // this.imageUrl = 'https://your-image-host.com/image/' + '111';
    if (JSON.parse(uni.getStorageSync('detail'))) {
      let arr = JSON.parse(uni.getStorageSync('detail')).persons
      let arr2
      if (arr.length > 0) {
        arr2 = arr.map(el => {
          return el.contactsName
        })
        this.userList.push(arr2)
      }
    }

  },
  onLoad(options) {
    this.edictID = options.id
    detailValue({
      id: options.id
    }).then(res => {
      this.detail = res.data
      this.imageUrl = res.data.signatures
      this.listCard[0].title = res.data.mdcInstitutionName
      this.listCard[0].child[0].mark = res.data.serialNo
      this.listCard[0].child[1].mark = res.data.mdcInstitutionShortName
      this.listCard[0].child[2].mark = res.data.mdcInstitutionAddress
      this.userInfo = {
        sharpsGrossWeight: res.data.sharpsGrossWeight,
        infectionGrossWeight: res.data.infectionGrossWeight,
        infectionNetWeight: res.data.infectionNetWeight,
        sharpsNetWeight: res.data.sharpsNetWeight,
        infectionBarrelsCount: res.data.infectionBarrelsCount,
        sharpsBarrelsCount: res.data.sharpsBarrelsCount,
        totalWasteNetWeight: res.data.totalWasteNetWeight,
        transferPerson: res.data.transferPerson,
      }
    }).catch(err => {
      uni.$u.toast('获取详情信息失败!')
    })
  },
  methods: {
    showSelect() {
      this.show = true
    },
    setTransferPerson(name) {
      this.userInfo.transferPerson = name
    },
    confirm(e) {
      // console.log('e:', e)
      this.userInfo.transferPerson = e.value[0]
      this.show = false
    },
    fieldChange(field, formData) {
      if (['sharpsNetWeight', 'infectionNetWeight'].includes(field)) {
        formData.totalWasteNetWeight = "" + (Number(formData.sharpsNetWeight || 0) + Number(formData.infectionNetWeight || 0))
      }
    },
    submit() {
      let child = this.$refs.child
      child.$refs.form.validate().then(res => {
        console.log("=[]", child.from)
        medicalWasteEdit({
          ...child.from,
          id: this.edictID
        }).then(res => {
          uni.$u.toast('编辑成功');
          uni.navigateBack()
        }).catch(err => {
          uni.$u.toast('编辑失败!');
        })
      }).catch(errors => {
        uni.$u.toast('校验失败')
      })

    },
  }
}
</script>

<style lang="less" scoped>
.baocun {
  font-size: 34rpx;
  color: #fff;
  width: 690rpx;
  height: 90rpx;
  background: #3db020;
  border-radius: 10rpx;
  margin: 0 auto;
  margin-bottom: 40rpx;
}

/deep/ .home_card {
  border-radius: 0rpx !important;
}

/deep/ .filecard {
  padding: 0 !important;
}

.sziedzqz {
  width: 200rpx;
  height: 200rpx;
  margin-top: 30rpx;
}

.soltValue {
  text-align: right;

  .total {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: Semibold;
    text-align: right;
    color: #333333;
    padding: 20rpx 0;

    span {
      font-size: 40rpx;
    }
  }

}

.cardtop {
  position: relative;
  top: -20rpx;

}

.fouter {
  display: flex;
  gap: 20rpx;
  justify-content: center;

}

.time {
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: right;
  color: #999999;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

/deep/ .betitle::before {
  content: '';
  display: block;
  width: 10rpx;
  height: 40rpx;
  background: transparent !important;
  position: absolute;
  left: -20rpx;
}

.content {
  height: calc(100vh - 200rpx);
}

.dzqz {
  width: 100;
  box-sizing: border-box;
  background: white;
  padding: 10rpx 30rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: Semibold;
  text-align: left;
  color: #333333;
  margin-bottom: 30rpx;
}
</style>
